<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="static/css/main1.css"/>
		<link rel="stylesheet" type="text/css" href="static/css/animate.css"/>
		<script src="static/3rd/jquery-3.2.1.min.js"></script>
		<!--<script src="static/3rd/ScrollText.js"></script>-->
		<script src="static/3rd/fontscroll.js"></script>
		<!--<script src="static/3rd/jquery.nicescroll.js"></script>-->
		<script src="static/3rd/jquery.backstretch.min.js"></script>
		<style type="text/css">
			.top_box{width: 70%;float: left;}
			.tab_right{float: left;}
			.ec_top_box{width: 100%;}
			.ec_top_box>div{float: left;}
			.tab_left{width:40%;}
			.map_middle{width: 60%;}
			.tab_content tr td{text-align:center;}
			.tab_heard tr th {text-align : center;}
			.titleBox{overflow: hidden;}
			.titleBox li{float: left;width: 33.3%;padding-left: 12px;}
			.title{color: #fff;margin-top:5px;font-size:14px}
			.titleNum{color: #fce24f;font-size: 18px;margin-top: 5px;}
			.leftBar{height:15px;width:40%;border:solid 1px red}
			.rightBar{height:15px;width:40%;border:solid 1px red}
			.barListConBox{overflow: hidden;}
			.barListConBox>div{float: left;}
			.middleTitle{width: 20%;text-align: center;}
			.titleTop{font-weight: normal;color: #fff;position: absolute;top:60px;left: 5px;}
			.titleTop span{padding: 10px;background: #874458;margin-left: 5px;border-radius: 3px;}
			h2{background: linear-gradient(to right,rgba(58,111,185,0.3),rgba(58,111,185,0));border-bottom: solid 1px rgba(58,111,185,0.2);padding: 5px 0 10px 0;font-size: 16px;}
			.headerBox h2{float: none;padding: 5px 0 10px 0;}
			.map_middle{padding: 0;}
			.mapList{top:40px}
			/*.mapList table th:nth-child(1),.mapList table td:nth-child(1){width:20%}
			.mapList table th:nth-child(2),.mapList table td:nth-child(2){width:30%}
			.mapList table th:nth-child(3),.mapList table td:nth-child(3){width:40%}
			.mapList table th:nth-child(4),.mapList table td:nth-child(4){width:40px}*/
			.mapList thead tr{background:rgba(24,61,194,0.7);}
			.ec_table_box{display: flex;flex-direction: column;}
			.table_list{flex: 1;display: flex;}
			.table_list table{width: 100%;text-align: center;display: flex;flex-direction: column;border-collapse: collapse;border:solid 1px #0058AC;margin: 10px;}
			.table_list table th,.table_list table td{display: inline-block;flex: 1;padding:5px 3px;border-bottom: solid 1px #0058AC;}
			.table_list table thead{background: rgba(22,47,183,0.5);}
			.table_list table th:first-child,.table_list table td:first-child{width:50px;}
			.table_list table tr{width: 100%;display: block;display: flex;}
			.table_list table tbody{flex: 1;overflow: auto;}
			.table_list table tbody tr.currentColor{color: #f46a17}
			.barListLeft{display: flex;flex-direction: column;}
			.ecBarBox{flex: 1;}
			.map_middle{display: flex;flex-direction: column;}
			.ecBar{flex: 1;}
			.close_win{position: absolute;z-index: 0;top: 0;right: 0;height: 50px;width: 62px;background: url(static/img/top_bg.png) no-repeat -950px 0;}
			.close_win:hover{background: url(static/img/top_bg.png) no-repeat -1056px 0;}
			.winBar{display:none;height: 100%;width: 100%;position: absolute;top: 0;left: 0;background: rgba(0,0,0,0.6);}
			.winBarBox{width: 50%;height: 50%;background: #2d2d54;left: 25%;top: 25%;position: absolute;box-shadow: 0 0 20px #171717;display: flex;flex-direction: column;}
			.winBarBox table{width: 100%;line-height: 24px;}
			.tableTitel{height: 30px;line-height: 30px;font-weight: bold;color: #fff;font-size: 18px;padding-left: 10px;margin-top: 10px;display: flex;}
			.tableTitelBox{flex: 1;}
			.winClose{font-size: 26px;margin-right: 10px;cursor: pointer;}
			.winClose:hover{opacity: 0.7;}
		</style>
	</head>
	<body style="background: #000026; perspective: 100vh;"> 
		<img class="bgImg" src="" alt="" />
		<!--<div class="start_page pt-page" style="visibility: hidden;">
		    <img src="static/img/3.jpg" style="z-index: -1;width: 100%;height: 100%;position: absolute"/>
		</div>-->
		<div class="menu_bg">
			<ul class="menuLeft">
				<li><a href="">全国接入资源视图</a></li>
				<li><a href="全国IDC资源概览.html">重点接入业务视图</a></li>
				<li><a href="全国域名资源视图.html">全国域名资源视图</a></li>
				<!-- <li><a href="DXQ传统IDC和云接入资源发展趋势图.html">CDN和云业务发展情况(建设中)</a></li> -->
				<!-- <li><a href="资源转租情况.html">资源转租情况(建设中)</a></li> -->
				<li><a href="重点问题情况监测.html">重点问题情况监测</a></li>
				<li><a href="DU业务总览.html">DU业务总览</a></li>
				<li><a class="active" href="DU指标总览.html">DU指标总览</a></li>
			</ul>
		</div>
		<div class="container" id="page1st">
			<div class="header">
				<div class="logo" title="全国接入资源视图">DU指标总览</div>
				<a href="全国域名资源视图.html" class="pre_btn"></a>		
			</div>
			<!--<div class="home" title="返回首页"><a href="index.html"></a></div>-->
			<div class="content"> 
				<div class="top_tip">
				截至2018年2月，全国信安系统已覆盖<strong>1965</strong>家国内持证接入类服务企业，<strong>43,910,758</strong>个服务器IP地址和<strong>35,737,492</strong>个顶级域名
				</div>
				<div class="bottom_content">
					<div class="top_box">
							<div class="tab_left">
						    <div class="ec_table_box boxBg">
							    <h2>查询指令监控</h2>
							    <div class="table_list">
							    	<table class="">
							    		<thead>
							    			<tr>
								    			<th>指令ID</th>
								    			<th>指令内容</th>
								    			<th>指令接收时间</th>
								    			<th>返回值</th>
								    		</tr>
							    		</thead>
							    		<tbody id="FontScroll">
							    			<tr>
								    			<td>1</td>
								    			<td>1</td>
								    			<td>465165456</td>
								    			<td></td>
								    		</tr>
							    		</tbody>
							    	</table>	
							    </div>
								</div>
								
								<div class="barListLeft boxBg" style="margin-top:10px">
									<h2>活跃数据监控</h2>
									<div class="ecBarBox" id="activeMonitor"></div>
								</div>
								
								<div class="barListLeft boxBg" style="margin-top:10px">
									<h2>分区情况展示</h2>
									<div class="ecBarBox" id="partition"></div>
								</div>
							</div>
							<div class="map_middle mapItem boxBg">
								<h2 style="text-align: left">电信云访问日志所属机房占比</h2>
								<div class="ecBar" id="ecBar"></div>
							</div>

					</div>
					<div class="tab_right joinSource" style="padding-top: 10px;">
						<div class="right_table_box boxBg">
						 	<div class="headerBox">
						    <h2>segment状态监控</h2>
						 	</div>
							<div id="barWeg" class="ecBox"></div>
						</div>
						
						<div class="right_table_box boxBg" style="margin-top: 8px;">
							<div class="headerBox">
								<h2>接口机文件目录</h2>
							</div>
							<div id="barFile" class="ecBox"></div>
						</div>
					</div>
				</div>
				</div>
				<div class="map_open" id="mapOpen" style="z-index: 99999999;">
					<div class="map_shadow"></div>
					<div class="iframeBox" style="background:#1d2038;width: 70%; height:80%;left:15%;top:10%;z-index: 999;position: absolute;">
						<div class="close_win" style="z-index: 9999;"></div>
						<div class="pieLineDx" id="pieLineDx"></div>
					</div>
				</div>
			</div>
			<div class="foot">
				<a href="全国IDC资源概览.html" class="next_btn"></a>
			</div>
		</div>
		<div class="foot_right_logo"></div>
		<div class="winBar">
			<div class="winBarBox">
				<div class="tableTitel">
					<div class="tableTitelBox">df -h</div>
					<div class="winClose">×</div>
				</div>
				<div class="table_list">
					<table>
						<thead>
							<tr>
								<th>文件系统</th>
								<th>容量</th>
								<th>已用</th>
								<th>可用</th>
								<th>已用%</th>
								<th>挂载点</th>
							</tr>
						</thead>
						<tbody>
		    			<tr>
			    			<td>1</td>
			    			<td>1</td>
			    			<td>465165456</td>
			    			<td>213</td>
			    			<td>213</td>
			    			<td>4</td>
			    		</tr>
		    		</tbody>
					</table>
				</div>
			</div>
			
		</div>
		<script src="static/js/calculate1.js"></script>
		<script>
			calculateDu();
			window.onresize=function(){
				calculateDu();
			}
		</script>
		<script src="static/echarts/echarts.min.js"></script>
		<script src="static/echarts/china.js"></script>
		<!--<script src="static/js/page2nd1.js"></script>-->
		<script src="static/js/ecUdIndex.js"></script>
		<script src="static/js/menuShow.js"></script>
		<script src="static/js/boxBg.js"></script>
		<!--<script type="text/javascript">
			function AutoScroll(obj) {
				$(obj).find("tr:first").animate({
					marginTop: "-27px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).appendTo(obj);
					$(obj).find("tr").removeClass('currentColor')
					$(obj).find("tr:first").addClass('currentColor')
					$(obj).animate({scrollTop: 0}, 100);
				});
			}
			var timer=setInterval('AutoScroll("#FontScroll")', 3000);
			$("#FontScroll").hover(function(){
				clearInterval(timer)
			},function(){
				timer=setInterval('AutoScroll("#FontScroll")', 3000);
			})
//		var scroll1 = new ScrollText("barList1","pre2","next2",true,500,true);
//	    scroll1.LineHeight = 63;
		</script>-->
		<script src="static/js/imgSkin.js"></script>
		<script>
			$(".winClose").click(function(){
				$(".winBar").fadeOut()
			})
			$(".winBar").click(function(){
				$(".winBar").fadeOut()
			})
		</script>
	</body>
</html>
